﻿
@{
    ViewBag.Title = "提取盲水印";
}

<div>

    <div>

        <!-- Nav tabs -->
        @*<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" role="tablist">
                <li role="presentation" class="active"><a href="#type1" role="tab" data-toggle="tab">上传时添加</a></li>
                <li role="presentation"><a href="#type2" role="tab" data-toggle="tab">下载时添加</a></li>

            </ul>*@
        <div class="content">
            <div class="row">

                <div class="col-sm-12">
                    <div class="alert alert-info">
                        <h4><b>介绍</b></h4>
                        <ul>
                            <li>
                                提取盲水印的请求包与 COS 简单上传文件接口一致，只需在请求包头部增加图片处理参数 Pic-Operations 并使用提取盲水印参数（watermark/4）。
                            </li>
                        </ul>
                    </div>




                </div>
            </div>
            <div class="row">
                <div class="widget-box">
                    <div class="widget-header"><h4 class="widget-title">参数配置</h4></div>
                    <div class="widget-body">
                        <div class="widget-main">

                            @*<hr>*@
                            <form class="form-horizontal" id="watermarkform">



                                <div class="form-group">

                                    <label class="col-sm-3 control-label no-padding-right">操作类型 </label>
                                    <div class="col-sm-9">
                                        <div class="radio col-sm-4" id="op-type-radio">
                                            <label>
                                                <input name="form-op-radio" type="radio" class="ace" data-target="op-upload-remark" data-val="1">
                                                <span class="lbl"> 上传图片进行提取</span>
                                            </label>
                                            <label>
                                                <input name="form-op-radio" type="radio" class="ace" data-target="op-download-remark" data-val="2">
                                                <span class="lbl"> 提取云端已有的图片</span>
                                            </label>


                                        </div>
                                        <div class="col-sm-8" id="type-remark">
                                            <div class="alert alert-success remark" id="op-upload-remark">
                                                <ul>
                                                    <li> 需要手动选择参数进行</li>
                                                </ul>
                                            </div>
                                            <div class="alert alert-success remark" id="op-download-remark">
                                                <ul>
                                                    <li>可以自动匹配出水印类型、以及水印参数</li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label class="col-sm-3 control-label no-padding-right">水印类型 </label>
                                    <div class="col-sm-9">
                                        <div class="radio col-sm-4" id="type-radio">
                                            <label>
                                                <input name="form-field-radio" type="radio" class="ace" data-target="type1-remark" data-val="1">
                                                <span class="lbl"> 半盲水印</span>
                                            </label>
                                            <label>
                                                <input name="form-field-radio" type="radio" class="ace" data-target="type2-remark" data-val="2">
                                                <span class="lbl"> 全盲水印</span>
                                            </label>
                                            <label>
                                                <input name="form-field-radio" type="radio" class="ace" data-target="type3-remark" data-val="3">
                                                <span class="lbl">文字水印</span>
                                            </label>
                                        </div>
                                        <div class="col-sm-8" id="type-remark">
                                            <div class="alert alert-success remark" id="type1-remark">
                                                <ul>
                                                    <li>
                                                        需要选择原图
                                                    </li>

                                                </ul>
                                            </div>
                                            <div class="alert alert-success remark" id="type2-remark">
                                                <ul>
                                                    <li> 提取水印需水印图 </li>
                                                </ul>
                                            </div>
                                            @*<div class="alert alert-success remark" id="type3-remark">
                                                    <ul>
                                                        <li>提取需要水印文字 </li>
                                                    </ul>
                                                </div>*@
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group" id="processed-img-row">

                                    <label class="col-sm-3 control-label no-padding-right">待提取图片 </label>

                                    <div class="col-sm-9">
                                        <div class="col-sm-4">
                                            <div class="select-img-box ">
                                                <div class="img-wrapper position-absolute"> <img id="processed-img" class="img-container" onload="calMeta(this)" /></div>

                                                <div class="center-block">
                                                    <i class="icon-add_css"></i>
                                                    <i class="ace-icon glyphicon glyphicon-pencil" style="display:none;"></i>

                                                    <div>选择图片</div>
                                                </div>
                                                <div class="select-menu">
                                                    <span id="processed-img-gallery" class="img-gallery-btn" data-imgwrapper="processed-img" data-sourcetype="2" data-toggle="modal" data-target="#modal-gallery" title="选择待提取图片">图库选择</span>
                                                    <span id="processed-img-upload" onclick="$('#processed-img-uploader').trigger('click')">本地上传</span>
                                                    <input type="file" id="processed-img-uploader" data-order="1" style="display:none;" name="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp" />
                                                </div>

                                            </div>
                                            <span class="img-meta"></span>
                                        </div>
                                        <div class="col-sm-8">

                                            <div class="col-sm-3">
                                                <span class="btn  btn-sm btn-default" style=" top: 24px; left: -10px; border-radius:5px;" data-toggle="modal" data-target="#modal-image-process">
                                                    图片处理
                                                    <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                                </span>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="select-img-box ">
                                                    <img class="img-container" onload="calMeta(this)" style="cursor: zoom-in; display: inline;" src="" />

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="form-group" id="origin-img-row">

                                    <label class="col-sm-3 control-label no-padding-right">原图 </label>

                                    <div class="col-sm-9">
                                        <div class="col-sm-4">
                                            <div class="select-img-box ">
                                                <div class="img-wrapper position-absolute"> <img id="origin-img" class="img-container" onload="calMeta(this)" /></div>

                                                <div class="center-block">
                                                    <i class="icon-add_css"></i>
                                                    <i class="ace-icon glyphicon glyphicon-pencil" style="display:none;"></i>

                                                    <div>选择图片</div>
                                                </div>
                                                <div class="select-menu">
                                                    <span id="origin-img-gallery" class="img-gallery-btn" data-imgwrapper="origin-img" data-toggle="modal" data-sourcetype="0" data-target="#modal-gallery" title="选择原图">图库选择</span>
                                                    <span id="origin-img-upload" onclick="$('#origin-img-uploader').trigger('click')">本地上传</span>
                                                    <input type="file" id="origin-img-uploader" data-order="2" style="display:none;" name="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp" />
                                                </div>

                                            </div>
                                            <span class="img-meta"></span>
                                        </div>
                                        <div class="col-sm-4">

                                        </div>
                                    </div>


                                </div>

                                <div class="form-group" id="watermark-img-row">

                                    <label class="col-sm-3 control-label no-padding-right">水印图 </label>

                                    <div class="col-sm-9">
                                        <div class="col-sm-4">
                                            <div class="select-img-box ">
                                                <div class="img-wrapper position-absolute"> <img id="watermark-img" class="img-container" onload="calMeta(this)" /></div>

                                                <div class="center-block">
                                                    <i class="icon-add_css"></i>
                                                    <i class="ace-icon glyphicon glyphicon-pencil" style="display:none;"></i>

                                                    <div>选择图片</div>
                                                </div>
                                                <div class="select-menu">
                                                    <span id="watermark-img-gallery" class="img-gallery-btn" data-imgwrapper="watermark-img" data-toggle="modal" data-sourcetype="1" data-target="#modal-gallery" title="选择水印图">图库选择</span>
                                                    <span id="watermark-img-upload" onclick="$('#watermark-img-uploader').trigger('click')">本地上传</span>
                                                    <input type="file" id="watermark-img-uploader" data-order="3" style="display:none;" name="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp" />
                                                </div>

                                            </div>
                                            <span class="img-meta"></span>
                                        </div>
                                        <div class="col-sm-4">

                                        </div>
                                    </div>


                                </div>


                                <div id="watermark-text-row" class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right">水印文字 </label>
                                    <div class="col-sm-9">
                                        <div class="col-sm-4">
                                            <input id="watermark-text-input" readonly type="text" placeholder="自动带出文字内容" style=" width: 211.5px; padding-left: 12px;" oninput=" this.value = value.replace(/[^a-zA-Z0-9]/g, ''); postParams.watermarktext = this.value; return this.value;" onblur="enableSumbit()" />
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="alert alert-danger">
                                                <ul>
                                                    <li>限制：文字盲水印当前支持数字[0 - 9]及英文大小写[A - Z,a - z]</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                                <div class="form-actions center">
                                    <button type="button" class="btn btn-sm btn-primary " id="reset">
                                        重置
                                        <i class="ace-icon fa fa-refresh icon-on-right bigger-110"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-success " id="submit">
                                        提交
                                        <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                    </button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Tab panes -->
        @*<div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="type1">



                </div>
                <div role="tabpanel" class="tab-pane" id="type2">
                    <div class="row">

                        <div class="col-sm-8">
                            <div class="alert alert-info">
                                <h4><b>介绍</b></h4>
                                <ul>
                                    <li>
                                        图片下载时添加盲水印与添加普通水印操作相同，只需在图片访问链接后使用 watermark 参数即可。
                                    </li>
                                </ul>
                            </div>
                        </div>




                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="type3">可直接将文字信息添加至图片中</div>

            </div>*@


    </div>


    <div class="modal fade" id="modal-gallery" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">选择图片</h4>
                </div>
                <div class="modal-body">
                    <ul class="ace-thumbnails clearfix" id="img-list">
                    </ul>
                    <div class="center" style=" background-color: #F5F5F5;border-top: 1px solid #E5E5E5;padding: 10px;margin:5px;"><button class="btn btn-primary" id="btn-loadmore" style="display:none;">加载更多</button></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="gallery-submit">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div id="right-menu" class="modal aside aside-right aside-vc aside-fixed navbar-offset no-backdrop aside-hidden" data-body-scroll="false" data-offset="true" data-placement="right" data-fixed="true" data-backdrop="false" tabindex="-1" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content ace-scroll">
                <div class="scroll-track scroll-dark no-track idle-hide scroll-active" style="display: block; height: 429px;"><div class="scroll-bar" style="height: 169px; top: 0px;"></div></div><div class="scroll-content" style="">
                    <div class="modal-header no-padding">
                        <div class="table-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <span class="white">×</span>
                            </button>
                            响应控制台
                        </div>
                    </div>

                    <div class="modal-body">

                        <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" role="tablist">
                            <li role="presentation" class="active"><a href="#raw-response" role="tab" data-toggle="tab">原始响应</a></li>
                            <li role="presentation"><a href="#img-response" role="tab" data-toggle="tab">图片结果</a></li>

                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="raw-response">
                                <pre id="response-result" style="max-height: 90%;"></pre>
                            </div>
                            <div class="tab-pane " id="img-response">
                                <div style=" justify-content: center; display: flex; flex-wrap: wrap;">
                                    <div style=" flex-basis: 100%; text-align: center;" class="cboxElement" data-rel="colorbox">
                                        <img id="img-response-preview" src="" style="max-width:250px;" />
                                    </div>
                                    @*<div style=" text-align: center; padding: 20px;"><button class="btn btn-primary">去提取</button></div>*@
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!-- /.modal-content -->

            <button class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn" id="btn-right" data-target="#right-menu" data-toggle="modal" type="button">

                <i data-icon1="fa-plus" data-icon2="fa-minus" class="ace-icon fa bigger-110 icon-only fa-plus"></i>
            </button>
        </div><!-- /.modal-dialog -->
    </div>


    @*基础 图片处理*@
    <div class="modal fade" id="modal-image-process" tabindex="2" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">图片处理</h4>
                </div>
                <div class="modal-body" style="min-height:400px;">
                    <div class="tabbable tabs-left">
                        <ul class="nav nav-tabs" id="myTab3">
                            <li class="active">
                                <a data-toggle="tab" href="#scale" aria-expanded="true">
                                    <i class="ace-icon glyphicon glyphicon-zoom-in bigger-110"></i>
                                    缩放
                                </a>
                            </li>

                            <li class="">
                                <a data-toggle="tab" href="#tailor" aria-expanded="false">
                                    <i class="blue ace-icon fa  fa-scissors bigger-110"></i>
                                    裁剪
                                </a>
                            </li>

                            <li class="">
                                <a data-toggle="tab" href="#rotate" aria-expanded="false">
                                    <i class="ace-icon fa fa-repeat"></i>
                                    旋转
                                </a>
                            </li>

                            <li class="">
                                <a data-toggle="tab" href="#blur" aria-expanded="false">
                                    <i class="ace-icon fa fa-rocket"></i>
                                    模糊
                                </a>
                            </li>

                            <li class="">
                                <a data-toggle="tab" href="#sharpen" aria-expanded="false">
                                    <i class="ace-icon fa fa-bolt"></i>
                                    锐化
                                </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#format" aria-expanded="false">
                                    <i class="ace-icon fa fa-bolt"></i>
                                    格式转化
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">

                            @*缩放*@
                            <div id="scale" class="tab-pane active">
                                <div class="widget-box transparent ui-sortable-handle" id="widget-box-12">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter">等比缩放</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-6 no-padding-left no-padding-right">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 宽度% </label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="scale-width" placeholder="80" class="col-xs-10 col-sm-5" min="0" max="100">

                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 高度% </label>

                                                    <div class="col-sm-9">
                                                        <input type="number" id="scale-height" placeholder="80" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>

                                                <input class="process-param" hidden value="" />
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @*裁剪*@
                            <div id="tailor" class="tab-pane">
                                <div class="widget-box transparent ui-sortable-handle" id="widget-box-12">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter">普通裁剪</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-6 no-padding-left no-padding-right">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 宽度 </label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="参数取值范围应大于0，小于原图宽高" class="col-xs-10 col-sm-5" min="0" max="100">

                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 高度 </label>

                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="参数取值范围应大于0，小于原图宽高" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">右偏移dx </label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="相对于图片左上顶点水平向右偏移 dx" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">下偏移dy</label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="相对于图片左上顶点水平向下偏移 dx" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>
                                                <input class="process-param" hidden value="" />
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @*旋转*@
                            <div id="rotate" class="tab-pane">
                                <div class="widget-box transparent ui-sortable-handle" id="widget-box-12">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter">普通旋转</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-6 no-padding-left no-padding-right">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">顺时针旋转角度 </label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="0-360" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>
                                                <input class="process-param" hidden value="" />
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @*模糊*@
                            <div id="blur" class="tab-pane">
                                <div class="widget-box transparent ui-sortable-handle" id="widget-box-12">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter">等比缩放</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-6 no-padding-left no-padding-right">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 高度% </label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="80" class="col-xs-10 col-sm-5" min="0" max="100">

                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 宽度% </label>

                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="80" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>
                                                <input class="process-param" hidden value="" />
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @*锐化*@
                            <div id="sharpen" class="tab-pane">
                                <div class="widget-box transparent ui-sortable-handle" id="widget-box-12">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter">锐化</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-6 no-padding-left no-padding-right">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 锐化程度</label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="取值范围为10 - 300间的整数。参数值越大，锐化效果越明显。（推荐使用70）" class="col-xs-10 col-sm-5" min="10" max="300">

                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 宽度% </label>

                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="80" class="col-xs-10 col-sm-5" min="0" max="100">
                                                    </div>
                                                </div>
                                                <input class="process-param" hidden value="" />
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @*格式转换*@

                            <div id="format" class="tab-pane">
                                <div class="widget-box transparent ui-sortable-handle" id="widget-box-12">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter">格式转换</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-6 no-padding-left no-padding-right">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 原格式 </label>
                                                    <div class="col-sm-9">
                                                        <input type="number" id="form-field-1" placeholder="80" class="col-xs-10 col-sm-5" min="0" max="100">

                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 目标格式 </label>

                                                    <div class="col-sm-9">
                                                        <select class="form-control" id="form-field-select-1" style="max-width:212px;">
                                                            <option value="jpg" selected>jpg</option>
                                                            <option value="bmp">bmp</option>
                                                            <option value="gif">gif</option>
                                                            <option value="png">png</option>
                                                            <option value="webp">webp</option>
                                                            <option value="yjpeg">yjpeg </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <input class="process-param" hidden value="" />
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="image-process-submit">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>

<script>

    var queryParams = {

        marker: '',
        type: 0
    };

    var postParams = {
        extractType: 1,//提取类型 1 上传提取  2 提取已有
        waterMarkType: 1,
        imageSourceType: 0,// 0 原图 1 水印图 3 待提取的图片
        originImg: {
            ObjectKey: '',
            FileData: '',
            uploadStatus: 0,
            previewUrl: ''
        },
        watermarkImg: {
            ObjectKey: '',
            FileData: '',
            uploadStatus: 0,
            previewUrl: ''
        },
        processedImg: {
            ObjectKey: '',
            FileData: '',
            uploadStatus: 0,
            previewUrl: ''
        },
        watermarktext: '',

        level: 1

    }
    var imgList = [];
    var previewImg = "";

    $(function () {
        var originImg = {
            width: 0,
            height: 0,
            filedata: ''
        };
        var watermarkImg = {
            width: 0,
            height: 0,
            filedata: ''
        }
        Init();



        $('#watermarkform').on('change', 'input[type=file]', function () {


            var file = this.files[0];
            var imgSize = this.files[0].size;  //b

            //创建读取文件的对象
            var reader = new FileReader();
            //创建文件读取相关的变量
            var imgFile;
            var that = this;
            var order = $(that).data('order');

            //为文件读取成功设置事件
            reader.onload = function (e) {
                imgFile = e.target.result;

                var imgEl = $(that).parent().siblings('.img-wrapper').children('.img-container');
                var info = $(that).parent().siblings('.center-block');
                imgEl.attr('src', imgFile);

                var width = imgEl[0].naturalWidth;
                var height = imgEl[0].naturalHeight;
                $(that).parent().parent().siblings('.img-meta').append(`<b>${width}x${height}</b>`);

                switch (order) {
                    case 1: {//待提取的图片
                        postParams.processedImg.ObjectKey = timestampFileName(file.name);
                        postParams.processedImg.FileData = imgFile.replace(/^data:image\/\w+;base64,/, '');
                        postParams.processedImg.uploadStatus = 0;//状态为待上传
                        break;
                    }
                    case 2: {//原图
                        postParams.originImg.ObjectKey = timestampFileName(file.name);
                        postParams.originImg.FileData = imgFile.replace(/^data:image\/\w+;base64,/, '');
                        postParams.originImg.uploadStatus = 0;//状态为待上传
                        break;
                    }
                    case 3: {//水印图

                        postParams.watermarkImg.ObjectKey = timestampFileName(file.name);
                        postParams.watermarkImg.FileData = imgFile.replace(/^data:image\/\w+;base64,/, '');
                        postParams.watermarkImg.uploadStatus = 0;//状态为待上传
                        break;
                    }
                }


                enableSumbit();
                imgEl.show();
                imgEl.viewer();
                info.hide();
                //$("#origin-img").attr('src', imgFile);
                //$("#origin-img").show();
                //$('.icon-add_css').hide();
                //$('.glyphicon-pencil').show();

            };

            //正式读取文件
            reader.readAsDataURL(file);

        })


        $('#submit').click(function () {
            $('#response-result').empty();

            $.post("/api/WaterMark/ExtractMark", postParams,
                function (res, status) {
                    debugger;
                    if (res) {
                        var header = res.data.Header;
                        var body = res.data.Body;
                        res.data.Header = JSON.parse(header);
                        res.data.Body = formatXml(body);
                        var str = JSON.stringify(res, null, 4);
                        $('#response-result')[0].innerHTML = syntaxHighlight(str);
                        //$('#response-result').append(data);
                        $('#img-response-preview').attr('src', res.data.ProcessResult.previewurl);
                        $('#right-menu').addClass('hasval');
                        $('#right-menu').modal('show');

                        $(' #img-response-preview').css('cursor', 'zoom-in');
                        $(' #img-response-preview').viewer();
                    }
                });

        })

        $('.img-gallery-btn').click(function () {

            queryParams.marker = '';

            $('#img-list').empty();
            var wrapperid = $(this).data('imgwrapper');
            var sourcetype = $(this).data("sourcetype");

            queryParams.imageSourceType = sourcetype;



            var text = $(this).attr('title');
            $('#modal-gallery .modal-title').text(text);
            $('#img-list').attr('data-target', wrapperid);
            fetchCosImage();
        })

        $('#btn-loadmore').click(function () {
            fetchCosImage();
        })

        $('#img-list').on('click', ' li', function () {
            var el = $(this);
            var className = el.attr('class');
            var seleted = false;
            seleted = className == 'selected';

            //$('#img-list li').each((n) => {
            //    console.log($(this))
            //    $(this).removeClass('selected');
            //})
            $('#img-list li').each(function () { $(this).removeClass('selected') })


            if (!seleted) el.addClass('selected');

        })

        $('#gallery-submit').click(function () {
            var selected = false;
            var src = '';
            var objectKey = ''
            var width = 0;
            var height = 0;

            $('#img-list li').each(function () {
                var className = $(this).attr('class');
                if (className == 'selected') {
                    selected = true;
                    var imgel = $(this).children('img');
                    src = imgel.attr('src');
                    objectKey = imgel.attr('data-key');
                    width = this.naturalWidth;
                    height = this.naturalHeight;
                    return true;
                }
            })
            if (!selected) $.niceAlert.warnning('请选择一张图片！');
            else {
                var selector = $('#img-list').attr('data-target');

                var imgEl = $('#' + selector);
                var info = $('#' + selector).parent().siblings('.center-block');

                imgEl.attr('src', src);
                imgEl.show();
                imgEl.viewer();
                info.hide();
                $('#modal-gallery').modal('hide');

                postParams.processedImg.ObjectKey = objectKey;
                //自动匹配原图
                if (postParams.waterMarkType == 1) {
                    if (postParams.extractType == 2) {
                        var uploadmodel = imgList.find(n => n.key == objectKey).value;
                        $('#origin-img').attr('src', uploadmodel.originImage.PreviewUrl);
                        $('#origin-img-row .center-block').hide();
                        $('#origin-img').show();
                        $('#origin-img').viewer();
                    }
                    postParams.originImg.ObjectKey = objectKey;
                    postParams.originImg.uploadStatus = 1;
                    postParams.originImg.previewUrl = src;
                }
                //自动匹配水印
                if (postParams.waterMarkType == 2) {
                    if (postParams.extractType == 2) {
                        var uploadmodel = imgList.find(n => n.key == objectKey).value;
                        $('#watermark-img').attr('src', uploadmodel.waterMarkMaterial.PreviewUrl);
                        $('#watermark-img-row .center-block').hide();
                        $('#watermark-img').show();
                        $('#watermark-img').viewer();

                    }
                    postParams.watermarkImg.ObjectKey = objectKey;
                    postParams.watermarkImg.uploadStatus = 1;
                    postParams.watermarkImg.previewUrl = src;
                }
                //自动匹配文字
                if (postParams.waterMarkType == 3) {
                    if (postParams.extractType == 2) {
                        var uploadmodel = imgList.find(n => n.key == objectKey).value;
                        $("#watermark-text-input").val(uploadmodel.waterMarkText);
                        postParams.watermarktext = uploadmodel.waterMarkText;
                    }

                }
                enableSumbit();
            }
        })





        $('#watermarkform').on('click', 'input[type=radio]', function () {
            toggleRadio(this);
            enableSumbit();
        })


        $('#image-process-submit').click(function () {
            var url = "";
            var param = "";
            var host = ""
            var sign=""
            var get_param = {
                key: postParams.processedImg.ObjectKey
            };
            console.log(get_param);
            $.get('/api/WaterMark/GetPreviewUrl', get_param, function (data) {
                url = data;
                 host = url.split("?")[0];
                 sign = url.split("?")[1];
                $('#myTab3 li').each(function (index, el) {
                    var className = $(this).attr('class');

                    if (className == "active") {

                        var current = $(this);
                        switch (index) {
                            //缩放
                            case 0: {

                                var width_percent = $('#scale-height').val();
                                var height_percent = $('#scale-height').val();
                                param = `/thumbnail/!${width_percent}x${height_percent}r`;

                                break;
                            }
                            //裁剪
                            case 1: {
                                break;
                            }
                            //旋转
                            case 2: {
                                break;
                            }
                            //模糊
                            case 3: {
                                break;
                            }
                            //锐化
                            case 4: {
                                break;
                            }
                            //格式转换
                            case 5: {
                                break;
                            }
                        }
                        url = host + param +"?"+ sign;
                        window.open(url);
                      
                        return true;
                    }
                });
            });
       
  
        })
    });

    function toggleRadio(radio) {
        var type = $(radio).data('val');

        var container = $(radio).parent().parent();

        var targetSeletor = $(radio).data('target');
        container.siblings('#type-remark').children('.remark').hide();
        $('#' + targetSeletor).show();
        if (container.attr('id') == 'op-type-radio') {

            postParams.extractType = type;
            switch (type) {
                case 1: {
                    $('#processed-img-gallery').hide();
                    $('#processed-img-upload').show();
                    $('#origin-img-upload').show();
                    $('#origin-img-gallery').hide();
                    $('#origin-img-upload').show();
                    $('#origin-img-row .select-menu').show();
                    $('#watermark-img-row .select-menu').show();

                    break;
                }
                case 2: {
                    $('#origin-img-upload').hide();
                    $('#origin-img-gallery').show();
                    $('#processed-img-gallery').show();
                    $('#processed-img-upload').hide();
                    $('#origin-img-row .select-menu').hide();
                    $('#watermark-img-row .select-menu').hide();
                }

            }
        }
        else if (container.attr('id') == 'type-radio') {
            switch (type) {
                case 1: {

                    //$('#origin-remark').show();
                    $('#origin-img-row').show(); //显示原图
                    $('#watermark-text-row').hide();//隐藏文字
                    $('#watermark-img-row').hide();  //隐藏水印图


                    break;
                };
                case 2: {
                    $('#watermark-img-row').show();//显示水印图
                    $('#watermark-text-row').hide();//隐藏文字
                    $('#origin-img-row').hide(); //隐藏原图

                    //$('#origin-remark').hide()
                    break;
                };
                case 3: {
                    $('#watermark-text-row').show();//显示文字
                    $('#watermark-img-row').hide(); //隐藏水印图
                    $('#origin-img-row').hide();//隐藏原图

                    //$('#origin-remark').hide();
                    break;
                };
            };
            postParams.waterMarkType = type;
        }





    }

    function fetchCosImage() {

        var url = '/api/WaterMark/GetImagesFromBucket';
        var param = {};

        //param = 'marker = ' + queryParams.marker;
        param = {
            marker: queryParams.marker,
            type: queryParams.imageSourceType,
            watermarktype: postParams.waterMarkType
        };

        $.get(url, param, function (res, status) {
            $('#img-list').innerHtml = '';
            var innerHtml = '';
            if (res.success) {
                var data = res.data;
                imgList.length = 0;
                data.list.forEach(n => {
                    imgList.push({ key: n.ObjectKey, value: n });
                    innerHtml = innerHtml + `<li><img src=${n.PreviewUrl} data-key='${n.ObjectKey}' onload='getImgInfo(this)'><div class='img-wrapper'><i class="ace-icon fa fa-check"></i></div><span class='img-info'></span></li>`
                })
                if (data.marker) {
                    $('#btn-loadmore').show();

                }
                else {
                    $('#btn-loadmore').hide();
                }
                queryParams.marker = data.marker;
                $('#img-list').append(innerHtml);
            }

        })

    }

    function getBase64Image(img) {
        img.setAttribute('crossOrigin', 'anonymous');
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        var dataURL = canvas.toDataURL('image/' + ext)
        return dataURL
    }

    function enableSumbit() {
        if (postParams.originImg.ObjectKey) $("#submit").attr("disabled", true);
        switch (postParams.waterMarkType) {

            //半盲
            case 1: {
                if (postParams.originImg.ObjectKey) $("#submit").removeAttr("disabled");
                break;
            }
            //全盲
            case 2: {
                if (postParams.watermarkImg.ObjectKey) $("#submit").removeAttr("disabled");
                break;
            }
            //文字
            case 3: {
                if (postParams.watermarktext) $("#submit").removeAttr("disabled");
                break;
            }
        }


    }


    function timestampFileName(fileName) {
        return fileName;
        var newName = '';
        if (fileName.indexOf('.') > 0) {
            var array = fileName.split('.');
            var realName = array[0];
            var extension = array[1];
            newName = realName + '-' + Date.now() + "." + extension;
        }
        else {
            newName = fileName + Date.now() + "." + 'jpg';
        }

        return newName;
    }

    function getImgInfo(img) {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        //$(img).siblings('.img-wrapper').children('.img-info').text(width + 'x' + height)

        $(img).parent('li').children('.img-info').text(width + 'x' + height);
    }


    function calMeta(img) {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        $(img).parent().parent().siblings('.img-meta').text(width + 'x' + height);
        return;
        if (postParams.waterMarkType == 1 && (width > 640 || height > 640)) {

            var info = $(img).parent().siblings('.center-block');
            $(img).hide();
            info.show();
            $.niceAlert.error('半盲水印的原图片尺寸不能大于640*640');

            $(img).attr('src', '');
            $(img).parent().siblings('.select-menu').children('input[type=file]')[0].value = '';
            return;
        }
    }
    function copy() {
        var el = document.getElementById("response-result");
        var content = el.innerText;
        var oInput = document.createElement('input');
        oInput.value = content;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        $(oInput).remove();
        $.niceAlert.success('复制完毕');

    }

    function reset() {
        $("#submit").attr("disabled", "true");

        postParams.optype = 1;
        postParams.originImg = {};
        postParams.watermarkImg = {};
        postParams.level = 1;
        postParams.waterMarkType = 1;

        $('#origin-img').attr('src', '');
        $('#origin-img').hide();
        $('#watermark-img').attr('src', '');
        $('#watermark-img').hide();
        $('.center-block').show();
    }

    function Init() {


        reset();

        $("#submit").attr("disabled", "true");

        var firstRadio = $('#type-radio').children().children('input[type=radio]:first')
        firstRadio.attr('checked', 'true');
        toggleRadio(firstRadio);
        $('#type-remark').children('.remark').hide();


        firstRadio = $('#op-type-radio').children().children('input[type=radio]:first')
        firstRadio.attr('checked', 'true');
        $('#op-type-radio').children('.remark').hide();
        toggleRadio(firstRadio);




        toggleRadio(firstRadio);

        $('.content img').css('cursor', 'zoom-in');


    }
    //$('#origin-img-uploader').on('change', function () {

    //    if (this.files.length == 1) {

    //    }
    //    var file = this.files[0];
    //    var imgSize = this.files[0].size;  //b
    //    if (imgSize > 1024 * 1024 * 1) {//1M
    //        return alert("上传图片不能超过1M");
    //    }
    //    if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
    //        return alert("图片上传格式不正确");
    //    }

    //    //$("#origin-img").attr("src", URL.createObjectURL(file));
    //    //return;
    //    //创建读取文件的对象
    //    var reader = new FileReader();
    //    //创建文件读取相关的变量
    //    var imgFile;
    //    //为文件读取成功设置事件
    //    reader.onload = function (e) {
    //        // alert('文件读取完成');
    //        imgFile = e.target.result;
    //        console.log(imgFile);
    //        $("#origin-img").attr('src', imgFile);
    //        $("#origin-img").show();
    //        $('.icon-add_css').hide();
    //        //$('.glyphicon-pencil').show();

    //    };

    //    //正式读取文件
    //    reader.readAsDataURL(file);

    //})
    //});

    function formatXml(str) {
        //var parser = new DOMParser();
        //parser.parseFromString(str, 'text/xml');

        return $.xml2json(str);
    }

    function SubmitValidate() {

    }
</script>
